<script setup lang="ts">
import { useLocale } from '@/composables/useLocale.ts';
import { openWindow } from '@/utils/common.ts';
const recordalUrl = 'https://beian.miit.gov.cn/#/Integrated/index';
const { $t } = useLocale();

</script>

<template>
  <div class="layout-footer">
    <div class="layout-footer-left">
      <span>{{ $t('footer.copyright') }}</span>
      <a :href="recordalUrl" target="_blank">{{ $t('footer.recordal') }}</a>
    </div>
    <div class="layout-footer-right">
      <a href="/privacy" target="_blank" rel="noreferrer noopene">{{ $t('footer.privacyPolicy') }}</a>
      <span>|</span>
      <a href="/legal" target="_blank" rel="noreferrer noopene">{{ $t('footer.legalStatement') }}</a>
      <span>|</span>
      <a href="/cookies" target="_blank" rel="noreferrer noopene">{{ $t('footer.aboutCookies') }}</a>
    </div>
  </div>
</template>

<style scoped lang="scss">
.layout-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--o-gap-4) var(--padding-x);
  color: var(--o-color-info3);
  @include respond-to('<=pad_v') {
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
  }
  @include respond-to('phone') {
    margin-top: 32px;
    border-top: 1px solid var(--o-color-control4);
  }
  .layout-footer-left, .layout-footer-right {
    @include tip1;
    display: flex;
    align-items: center;
    column-gap: var(--o-gap-2);
    a {
      color: var(--o-color-info3);
      &:hover {
        color: var(--o-color-info2);
      }
    }
  }
  .layout-footer-left {
    flex-wrap: wrap;
    @include respond-to('<=pad_v') {
      justify-content: center;
      gap: 4px;
      color: var(--o-color-info4);
      a {
        color: var(--o-color-info4);
      }
    }
  }
  .layout-footer-right {
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>